<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('选择产品')" />
	<th:block th:include="include :: bootstrap-editable-css" />
</head>

<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-10 search-collapse">
				<form id="role-form">
					<input name="orderId"  th:value="${orderId}" type="hidden"> 
					<div class="select-list">
						<ul>
							<li>产品名称：<input type="text" name="productName" />
							</li>
							<li>货号：<input type="text" name="productNo" />
							</li>
							<li><a class="btn btn-primary btn-rounded btn-sm"
								onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm"
								onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>

			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table"></table>
			</div>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: bootstrap-table-editable-js" />
	<script th:inline="javascript">
		var orderId=[[${orderId}]];
		var editFlag = [[${@permission.hasPermi('crm:product:edit')}]];
	    var removeFlag = [[${@permission.hasPermi('crm:product:remove')}]];
	    var productCategoryDatas = [[${@dict.getType('product_category')}]];
	    var productUnitDatas = [[${@dict.getType('product_unit')}]];
	    var prodcutStatusDatas = [[${@dict.getType('product_status')}]];
	    var prefix = ctx + "crm/product";
	    $(function() {
	        var options = {
	            url: prefix + "/listProduct",
		        sortName: "createTime",
		        sortOrder: "desc",
		        showSearch: false,
		        showRefresh: false,
		        showToggle: false,
		        showColumns: false,
		        clickToSelect: true,
	            modalName: "产品",
	            columns: [{
	            	radio: true
	            },
	            {
	                field : 'productId', 
	                title : '产品ID',
	                visible: false
	            },
	            {
	                field : 'productName', 
	                title : '产品名称',
		            sortable: true
	            },
	            {
	                field : 'productNo', 
	                title : '货号',
		            sortable: true
	            },
				{
				    title: '图片',
				    formatter: function(value, row, index) {
				    	return $.table.imageView(row.productImage);
				    }
				},
	            {
	                field : 'salePrice', 
	                title : '售价(元)',
		            sortable: true
	            },
	            {
	                field : 'productCategory', 
	                title : '产品类别',
	                formatter: function(value, row, index) {
	                   return $.table.selectDictLabel(productCategoryDatas, value);
	                },
		            sortable: true
	            },
	            {
	                field : 'productUnit', 
	                title : '计量单位',
	                formatter: function(value, row, index) {
	                   return $.table.selectDictLabel(productUnitDatas, value);
	                }
	            },
	            {
	                field : 'prodcutStatus', 
	                title : '产品状态',
	                formatter: function(value, row, index) {
	                   return $.table.selectDictLabel(prodcutStatusDatas, value);
	                },
		            sortable: true
	            }]
	        };
	        $.table.init(options);
	    });
		
		/* 报价单、订单维护-选择产品-提交 */
		function submitHandler() {
			var productId = $.table.selectFirstColumns();
			var productName = $.table.selectColumns("productName");
			if (productId.length == 0) {
       			$.modal.alertWarning("请选择一条记录");
       			return;
       		}
			$.modal.close();
			parent.$('#productId').val('');
			parent.$('#productName').val('');
			parent.$('#productId').val(productId);
			parent.$('#productName').val(productName);
		}
	</script>
</body>
</html>